<template>
  <div>
      主页
  </div>
</template>
<!-- 在script标签 加 lang="ts" -->
<script setup lang="ts">
  // `TypeScript` 是一种带有 `类型语法` 的 JavaScript 语言，在任何使用 JavaScript 的开发场景中都可以使用。
  // TS 是 JS 的超集，支持了JS 语法和扩展了类型语法。

  // 类型 创建的变量 如普通数据类型，对象 数组 函数等
  // 函数形参 返回值 等 类型
    let age:number=88;

    // ts创建数字类型的值
    let myage:number=88;

    // ts的作用
    // > 知道：TS作用是在编译时进行类型检查提示错误

  // - TS 是静态类型的编程语言，代码会先进行编译然后去执行，在 `代码编译` 期间做类型的相关检查，如果有问题编译是不通过的，也就暴露出了问题。
  // - 配合 VSCode 等开发工具，TS 可以提前到在 `编写代码` 的时候就能发现问题，更准确更快的处理错误。

// ts 的优势
// - 更早发现错误，提高开发效率
// - 随时随地提示，增强开发体验
// - 强大类型系统，代码可维护性更好，重构代码更容易
// - 类型推断机制，减少不必要类型注解，让编码更简单
// - 最后：Vue3源码TS重写，React和TS完美配合，Angular默认支持TS，大中型前端项目首选。
  // 
  // 安装 npm i -g typescript 安装ts文件
  // tsc -v 安装成功
  // tsc 编译的文件名 将ts文件 编译成js文件

  // 1  ts的类型注解
    // `: number` 就是类型注解，它为变量提供类型约束。
//     - 约定了什么类型，就只能给该变量赋值什么类型的值，否则报错。
// - 而且：约定类型之后，代码的提示也会非常清晰。
    let cc:number=88;
    cc=100;
    console.log(cc)
  // 原始类型
   let str:string="你好"
   console.log(str)

  let bol:boolean=true;
  console.log(bol)

  let mynul:null=null;
  console.log(mynul)

  let mun:undefined=undefined;  
   console.log(mun)
//2. ts的数组类型注解
  // 数组的写法1 :类型[]
  let num1:number[]=[1,2,3]
  console.log(num1)
  // 数组写法2： :Array<类型>
  let num2:Array<string>=["124","你","sdf"]
 console.log(num2)
  // 数组的联合类型 :(number|string|boolean)[]
    let num3:(number|string|boolean)[]=[1,"dsf",true]
  console.log(num3)
  // 数组联合类型2  :Array<string|boolean>
    let num4:Array<string|boolean>=["sdf","112",true]
    console.log(num4)
// 3 .联合类型 timer 可以是数字类型 也可以是 nul类型
let timer: number | null = null;
timer = setInterval(() => {}, 1000);
console.log(timer,"-00000-----------")

// 联合类型number | string[]
let arr1: number | string[];

// 这是什么类型？ arr1是 数字 或 字符串类型的数组
arr1=["21","1233"]

// 联合类型 | 
let x:string| number=99;
console.log(x)

// 4.类型别名 type 别名= 类型注解
type cumArr= (string|number|boolean)[];
let myarr:cumArr=["11",345,true]
console.log(myarr)

// 5.ts 的新增类型any类型---任意类型
// any 类型的作用是逃避 TS 的类型检查
  // 当变量的类型指定为 any 的时候，不会有任何错误，也不会有代码提示，TS会忽略类型检查
    let hao:any=88;
    hao="你好"
    console.log(hao)
    let arr4:any=["123",true,"sdf"]
    console.log(arr4)

//6.ts函数的形参和返回值类型的注解
// function say(形参：ts注解):返回值的类型注解
function say(x:string,y:any):boolean{
       console.log(x)
       console.log(y)
    return true
}
say("你",34)

//7  ts新增类型 :void() 函数的返回值类型
// 如果函数没有返回值，且没有定义函数返回值类型的时候，默认是 `void`
// 如果函数没有返回值，定义函数类型时返回值类型为 `void`
let run=(kk:string):void=>{
    console.log(kk)
}
// function run():void{  
// }
run("2143")

// 8 ts 函数的可选参数
// 可选形参 形参?:string
// 可选参数 一定要设计到必选参数的后面
function eat(food:string,myname:string="小李",age?:any):void {
       console.log(food)
       console.log(myname)
       console.log(age)
}
eat("烧烤")

// 9 对象类型
let person:{}={}
console.log(person)
// 对象的写法
let person1:{
  name:string,
  age:number,
  run(x:number):void
}={
  name:"按规范的",
  age:2,
  run(x:number){
    console.log(x)
  }
}
console.log(person1)

// 创建一个学生对象，该对象中具有以下属性和方法：

// - 属性：必选属性：姓名、性别、成绩，可选属性：身高
// - 方法：学习、打游戏（可选）
//   :::
  let stu:{
      name:string,
      sex:boolean,
      score:number,
      shengao?:number,
      learn():void,
      play?():string
  }={
      name:"小王",
      sex:true,
      score:90,
      learn(){}
  }
console.log(stu)



//  TS 新增类型

// - 联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any、泛型 等




</script>
